<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index09-DOM文档对象模型</title>
</head>
<body>
<div id="app" class="aaa">
    <h2>二级标题1</h2>
    <h2 id="second">二级标题2</h2>
    <h2>二级标题3</h2>
    <img src="../images/navlogo.png" alt="图片没有"/>
</div>
<input type="button" value="删除节点" onclick="removeFun()"/>
<input type="button" value="替换节点" onclick="replaceFun()"/>
<input type="button" value="前置插入节点" onclick="insertBeforeFun()"/>
<input type="button" value="属性设置" onclick="attrFun()"/>
<p>段落1</p>
<p class="bbb">段落2</p>
<p class="bbb">段落3</p>
<p class="bbb">段落4</p>
<p>段落5</p>
<span id="content" class="ccc ddd eee">
    我是内容
</span>
<script type="text/javascript">
    // window.onload：表示整个页面加载完成之后会执行后面的函数
    // window.onload = function(){
        // 根据id获取元素
        var appDiv = document.getElementById("app");
        console.log(appDiv);
        // // 通过js来操作样式
        // // appDiv.style.backgroundColor = 'red';
        // // 获取节点类型
        // console.log(appDiv.nodeType);
        // // 获取属性节点
        // var classAttrNode = appDiv.getAttributeNode("class");
        // console.log(classAttrNode);
        // console.log(classAttrNode.nodeType);
        // // 获取节点名称
        // console.log(appDiv.nodeName.toLowerCase());
        // console.log(classAttrNode.nodeName);
        // 获取app的父节点
        // console.log(appDiv.parentNode);
        // 获取子节点
        // var appChildren = appDiv.childNodes;
        // var len = appChildren.length;
        // for (var i = 0; i < len; i++) {
        //     // console.log(appChildren.item(i));
        //     if (appChildren.item(i).nodeType == 1) {
        //         // 获取到元素节点
        //         console.log(appChildren.item(i));
        //     }
        // }
        // children属性只能获取元素类型的子节点
        // var appChildren = appDiv.children;
        // var len = appChildren.length;
        // console.log(len);
        // 获取第一个子节点
        // console.log(appDiv.firstChild); // 文本节点
        // console.log(appDiv.firstElementChild); // 获取到第一个元素节点
        // // 获取最后一个子节点
        // console.log(appDiv.lastChild); // 文本节点
        // console.log(appDiv.lastElementChild); // 获取到最后一个元素节点
        // var h2Second = document.getElementById("second");
        // console.log(h2Second.previousElementSibling);
        // console.log(h2Second.nextElementSibling);
        // 根据标签名称获取元素
        // var pEles = document.getElementsByTagName("p");
        // console.log(pEles.length);
        // for (var i = 0; i < pEles.length; i++) {
        //     console.log(pEles.item(i));
        // }
        // querySelectorAll——获取所有
        // console.log(document.querySelectorAll(".bbb"));
        // // querySelector——获取满足选择器要求的第一个元素
        // console.log(document.querySelector(".bbb"));
        // var contentEle = document.getElementById("content");
        // // console.log(contentEle.classList.value);
        // // for (var i = 0; i < contentEle.classList.length; i++) {
        // //     console.log(contentEle.classList.item(i));
        // // }
        // contentEle.classList.add("fff");
        // contentEle.classList.remove("fff");
        // 创建元素
        var newDiv = document.createElement("div");
        console.log(newDiv);
        newDiv.innerHTML = "<h1>HelloWorld</h1>";
        console.log(newDiv.innerHTML);
        appDiv.appendChild(newDiv);
    // };

    function removeFun(){
        appDiv.removeChild(newDiv);
    }

    function replaceFun(){
        var newEleH2 = document.createElement("h2");
        newEleH2.innerHTML = '哈哈哈哈';
        appDiv.replaceChild(newEleH2,newDiv);
    }

    function insertBeforeFun(){
        var secondEle = document.getElementById("second");
        var newEleH2 = document.createElement("h2");
        newEleH2.innerHTML = '哈哈哈哈';
        appDiv.insertBefore(newEleH2, secondEle);
    }

    function attrFun(){
        var imgEle = document.getElementsByTagName('img')[0];
        console.log(imgEle.getAttribute("src"));
        imgEle.setAttribute("src", "../images/1.png");
        imgEle.removeAttribute("src");
    }
</script>
</body>
</html>